<style>
  .page {
    display: flex; /*设为伸缩容器*/
    flex-flow: row; /*伸缩项目单行排列*/
  }
  .sidebar {
    width: 300px;
  }

  #answers {
    flex: 1;
    margin-right: 20px;
  }
  .answer {
    margin-bottom: 20px;
    background-color: beige;
    border-bottom: 2px solid black;
  }
  img {
    width: 400px !important;
  }
</style>
<script src="getjson.js"></script>
<div class="page">
  <div id="answers">答案列表显示在这</div>
  <div class="sidebar">
    <h2>相关问题</h2>
    <div>
      <ul>
        相关问题的列表显示在这
      </ul>
    </div>
  </div>
</div>

<script>
  // 知乎回答的文件有4个an1-4.json
  // 相关问题 similar.json
  const promises = [
    getJSON('./similar.json'),
    ...[...Array(4)]
      .map((_, index) => index + 1)
      .map((n) => getJSON(`./an${n}.json`)),
  ]
  Promise.all(promises).then(([questions, ...datas]) => {
    const ul = document.querySelector('.sidebar ul')
    const answers = document.querySelector('#answers')
    console.log(questions)
    ul.innerHTML = questions.data
      .map((q) => `<li><a href='id=${q.id}'>${q.title}</a> ${q.answer_count}个回答</li>`)
      .join('')
    console.log(datas)
    answers.innerHTML = datas
      .reduce((s, data) => {
        return [...s, ...data.data]
      }, [])
      .map((a) => `<div class="answer">
      <h2>${a.author.name}</h2>
      <div class="content">
        ${a.content}
      </div>
    </div>`)
      .join('')
  })

  // 一条答案的html结构
  /*
    <div class="answer">
      <h2>作者</h2>
      <div class="content">
        内容
      </div>
    </div>
  */

  // 相关答案一条数据的html结构
  /*
    <li><a href='地址'>标题</a> n个回答</li>
  */

  // 你的代码
</script>
